<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <!-- 最外层class命名规则 工程-文件路径-文件名  -->
    <div class="demo-basic-zlstPluginChild-zlstPluginIndex">
        <Menu mode="horizontal"  active-name="1">
            <MenuItem name="basic-basic-vueStudy-vmodalDirective">
                <Icon type="ios-paper"></Icon>
                v-modal指令学习
            </MenuItem>
            <Submenu name="3">
                <template slot="title">
                    <Icon type="stats-bars"></Icon>
                    其他
                </template>
                <MenuGroup title="使用">
                    <MenuItem name="basic-basic-vueStudy-sassDemo">sass语法</MenuItem>
                    <!--<MenuItem name="3-2">活跃分析</MenuItem>-->
                    <!--<MenuItem name="3-3">时段分析</MenuItem>-->
                </MenuGroup>
            </Submenu>
        </Menu>
        dsafdsafdsaf
        <div v-privilege>dsafdsaf</div>
        <!--自路由的位置-->
        <router-view ></router-view>
    </div>
</template>

<script>
    import hljs from 'highlight.js'

    export default {
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-basic-zlstPluginChild-zlstPluginIndex pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 500);

        },
        data: function () {
            return {
            }
        },
        methods: {
        },
    }
</script>

<style scoped lang="scss">
    /***
    scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
    lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
    ***/
    .demo-basic-zlstPluginChild-zlstPluginIndex{
        .demo-content{
            margin: 15px 0;
        }
    }
</style>
